<template>
  <div class="container">
    <!-- 提示信息 -->
    <div class="alertLabel">
      {{alertLabelText}}
    </div>
    <!-- 保证金不足弹窗 -->
    <div class=" insufficientMarginDeposits">
      <div class="box">
        <div class="Title">
          <p>提示</p>
          <i @click="isHide">
            <img src="../../../static/img/buyCar/details/btn_close.png" alt="">
          </i>
        </div>
        <div class="conten">
          <p>保证金余额不足 , 请联系客服。</p>
          <div class="btn" @click="isHide">
            知道了
          </div>
        </div>
      </div>
    </div>
    <!-- 确认参与提示框 -->
    <div class=" insufficientMarginDeposits1">
      <div class="box">
        <div class="Title">
          <p>提示</p>
          <i @click="isHide1">
            <img src="../../../static/img/buyCar/details/btn_close.png" alt="">
          </i>
        </div>
        <div class="conten">
          <p>您是否确认参与投标？</p>
          <div class="btns">
            <p class="cancel" @click="isHide1">取消</p>
            <p class="confirm" @click="confirmFn">确认</p>
          </div>
        </div>
      </div>
    </div>
    <div class="heade">
      <div class="search">
        <p>
          <router-link to="/home">首页</router-link> > <router-link to="/buyCar">我要买车 </router-link> > <a href="javascript:void(0);">{{buyCarParams.car_style}}</a>
        </p>
        <div>
          <input type="text" v-model='inputVal' @keyup.enter="search" placeholder="请输入品牌车型">
          <i @click="search"></i>
        </div>
      </div>
      <div class="heade_con">
        <div class="carMainPic" v-bind:style="{
          'background': 'url(' + 'http://cheyipai.ucarcloud.cn/auctionCarFile/' + buyCarParams.car_main_pic + ') no-repeat center center',
          'backgroundSize': '100% auto'
        }">
          <!-- <img :src="'http://cheyipai.ucarcloud.cn/auctionCarFile/' +buyCarParams.car_main_pic" alt=""> -->
          <p class="license">{{buyCarParams.plate_number}}</p>
        </div>
        <div class="heade_con_r">
          <h2>{{buyCarParams.car_style}}</h2>
          <div class="times">
            <p :class="stateClassNmae">{{this.stateTex}}</p>
            <div class="times_times">
              <div class="tim">
                <p style="margin-bottom:12px">开始时间 : {{startTimes}}</p>
                <p>结束时间 : {{endTimes}}</p>
              </div>
              <div class="countDown">
                <p style="margin-bottom:12px">{{tex}} :</p>
                <p class="ti">
                  {{countDown.days}}<span> 天</span>
                  {{countDown.hours}}<span> 时</span>
                  {{countDown.minutes}}<span> 分</span>
                  {{countDown.seconds}}<span> 秒</span>
                </p>
              </div>
            </div>
          </div>
          <!-- 保证金 -->
          <div class="Bond">
            <div class="AmountMoney">
              <p>保证金余额</p>
              <h3>{{userInfor.amount}} 元</h3>
            </div>
            <div class="AmountMoney">
              <p>已冻结金额</p>
              <h3>{{userInfor.frozen}}元</h3>
            </div>
          </div>
          <!-- 按钮 -->
          <div class="Buttons">
            <div class="confirm" @click="participate">确认参与</div>
            <div class="telephone">
              <img :src="imgSrc" alt="">
              <span>400-877-9737</span>
            </div>
          </div>
          <!-- 温馨提示 -->
          <div class="Prompt">
            <p class="tit">温馨提示</p>
            <p>
              在参与投标前 , 需保证您的保证金额充足 ; 每参与一台车的投标 , 即会冻结2000.00元保证金 ; 在拍卖结束后的三天内 , 系统将解冻相关保证金 ; 如何支付保证金等问题 , 请拨打电话咨询 , 联系客服。
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      stateTex: '',
      imgSrc: '../../../static/img/buyCar/details/buy_img_tel.png',
      carList1: {},
      buyCarParams: {},
      countDown: {
        days: '00',
        hours: '00',
        minutes: '00',
        seconds: '00'
      },
      startTimes: '',
      endTimes: '',
      inputVal: '',
      tex: '距开始',
      userLis: '',
      userInfor: '',
      stateClassNmae: 'state',
      alertLabelText: '',
      blure: true
    }
  },
  created () {
    let _this = this
    setTimeout(function () {
      _this.isTim()
    }, 1000)
    // 读取本地
    let storage = window.sessionStorage
    let json = storage.getItem('WSKuserLis')
    let jsonObj = JSON.parse(json)
    if (jsonObj) {
      this.userLis = jsonObj.data.data.user
    }
    this.buyCarParams = this.$route.query
    this.getFinanceData()
    this.getUserInfor()
  },
  methods: {
    // 提示信息
    alertLabelShow () {
      $('.alertLabel').eq(0).fadeIn(0)
      setTimeout(function () {
        $('.alertLabel').eq(0).fadeOut(0)
      }, 3000)
    },
    // 参与投标
    participate () {
      if (this.carList1.bidSingle.status === '1' || this.carList1.bidSingle.status === '6') {
        this.alertLabelText = '投标已结束'
        this.isHide1()
        this.alertLabelShow()
      } else {
        // 判断保证金余额
        if (!this.userInfor.amount || this.userInfor.amount < 2000) {
          $('.insufficientMarginDeposits').width($(window).width())
          $('.insufficientMarginDeposits').height($(window).height())
          $('.insufficientMarginDeposits').offset({left: 0})
          $('.insufficientMarginDeposits').show(0)
        } else {
          $('.insufficientMarginDeposits1').width($(window).width())
          $('.insufficientMarginDeposits1').height($(window).height())
          $('.insufficientMarginDeposits1').offset({left: 0})
          $('.insufficientMarginDeposits1').show(0)
        }
      }
    },
    // 扣除保证金
    confirmFn () {
      this.buyCarParams = this.$route.query
      let x = this.buyCarParams
      this.$http({
        url: 'http://paimai.ucarcloud.cn/auctionCarCore/margin/transaction?x=' + new Date().getTime(),
        params: {
          userId: this.userLis.id,
          carId: this.buyCarParams.id,
          amount: this.userInfor.amount,
          frozen: this.userInfor.frozen,
          tag: '0'
        },
        headers: {'from': 'web'}
      }).then(r => {
        if (r.data.state === 'SUCCESS') {
          this.$router.push({path: '/buyCar/BidOffer', name: '/buyCar/BidOffer', query: x})
        } else {
          this.alertLabelText = r.data.message
          this.isHide1()
          this.alertLabelShow()
        }
      })
    },
    // 关闭余额不足
    isHide () {
      $('.insufficientMarginDeposits').hide(0)
    },
    // 关闭确认参与
    isHide1 () {
      $('.insufficientMarginDeposits1').hide(0)
    },
    getUserInfor () {
      this.buyCarParams = this.$route.query
      this.$http({
        url: 'http://paimai.ucarcloud.cn/auctionCarCore/user/info?x=' + new Date().getTime(),
        params: {
          userId: this.userLis.id
        },
        headers: {'from': 'web'}
      }).then(r => {
        this.userInfor = r.data.data
      })
    },
    search () {
      this.$router.push({path: '/buyCar', name: '/buyCar', params: {inputVals: this.inputVal}})
    },
    getFinanceData () {
      this.buyCarParams = this.$route.query
      window.scrollTo(0, 0)
      this.$http({
        url: 'http://paimai.ucarcloud.cn/auctionCarCore/web/getCarBidInfos?x=' + new Date().getTime(),
        params: {
          carId: this.buyCarParams.id,
          userId: this.buyCarParams.owner_id
        },
        headers: {'from': 'web'}
      }).then(r => {
        this.carList1 = r.data.data
        this.startTimes = r.data.data.bidSingle.startTime.substring(0, 16)
        this.endTimes = r.data.data.bidSingle.endTime.substring(0, 16)
        switch (this.carList1.bidSingle.status) {
          case '0':
            this.stateTex = '投标中'
            this.stateClassNmae = 'state1'
            break
          case '1':
            this.stateTex = '投 标成 功'
            this.stateClassNmae = 'state'
            break
          case '2':
            this.stateTex = '竞拍中'
            this.stateClassNmae = 'state2'
            break
          case '3':
            this.stateTex = '竞 拍成 功'
            this.stateClassNmae = 'state3'
            break
          case '4':
            this.stateTex = '竞 拍失 败'
            this.stateClassNmae = 'state3'
            break
          case '5':
            this.stateTex = '等 待竞 拍'
            this.stateClassNmae = 'state3'
            break
          case '6':
            this.stateTex = '投 标失 败'
            this.stateClassNmae = 'state'
            break
          case '7':
            this.stateTex = '等 待投 标'
            this.stateClassNmae = 'state'
            break
          default:
            this.stateTex = ''
            break
        }
      })
    },
    // 倒计时
    isTim () {
      let _this = this
      let endDate = _this.carList1.bidSingle.startTime
      let serverTim = _this.carList1.serverTime
      // 服务器时间
      let newSetDa = new Date(Date.parse(serverTim.replace(/-/g, '/'))).getTime()
      // 开始时间
      let newEndDa = new Date(Date.parse(endDate.replace(/-/g, '/'))).getTime()
      // 差
      let cha = newEndDa - newSetDa
      var inter = setInterval(function () {
        cha -= 1000
        if (cha < 0) {
          if (_this.blure) {
            _this.tex = '距结束'
            endDate = _this.carList1.bidSingle.endTime
            newEndDa = new Date(Date.parse(endDate.replace(/-/g, '/'))).getTime()
            newSetDa = new Date(Date.parse(serverTim.replace(/-/g, '/'))).getTime()
            cha = newEndDa - newSetDa
            _this.getFinanceData()
            if (cha < 0) {
              cha = 0
            }
            _this.blure = false
          } else {
            cha = 0
            clearInterval(inter)
            setTimeout(function () {
              _this.getFinanceData()
            }, 10)
          }
        }
        // 计算出相差天数
        var days = Math.floor(cha / (24 * 3600 * 1000)) >= 10 ? Math.floor(cha / (24 * 3600 * 1000)) : '0' + Math.floor(cha / (24 * 3600 * 1000))
        // 计算出小时数
        var leave1 = cha % (24 * 3600 * 1000)
        var hours = Math.floor(leave1 / (3600 * 1000)) >= 10 ? Math.floor(leave1 / (3600 * 1000)) : '0' + Math.floor(leave1 / (3600 * 1000))
        // 计算相差分钟数
        var leave2 = leave1 % (3600 * 1000)
        var minutes = Math.floor(leave2 / (60 * 1000)) >= 10 ? Math.floor(leave2 / (60 * 1000)) : '0' + Math.floor(leave2 / (60 * 1000))
        // 计算相差秒数
        var leave3 = leave2 % (60 * 1000)
        var seconds = Math.round(leave3 / 1000) >= 10 ? Math.round(leave3 / 1000) : '0' + Math.round(leave3 / 1000)
        _this.countDown = {
          days: days,
          hours: hours,
          minutes: minutes,
          seconds: seconds
        }
      }, 1000)
    }
  }
}
</script>
<style lang="scss" scoped>
.container{
  width: 1200px;
  margin: 0 auto;
  padding-bottom: 0;
  .alertLabel{
    display: none;
    padding: 0 20px;
    height: 50px;
    border-radius: 5px;
    line-height: 50px;
    background: rgba(0,0,0,0.8);
    color: #fff;
    text-align: center;
    font-size: 20px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -130px;
    z-index: 10001;
  }
  .insufficientMarginDeposits{
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    position: fixed;
    z-index: 1000;
    margin-top: -71px;
    margin-left: -108px;
    .box{
      width: 460px;
      height: 200px;
      position: absolute;
      z-index: 1001;
      background: #fff;
      border-radius: 5px;
      top: 50%;
      left: 50%;
      margin-top: -100px;
      margin-left: -230px;
      overflow: hidden;
      .Title{
        height: 40px;
        line-height: 40px;
        padding: 0 20px;
        border: 1px solid #e3e3e3;
        p{
          float: left;
          font-size: 16px;
          color: #ff6f3c;
        }
        i{
          float: right;
          display: block;
          height: 100%;
          width: 12px;
          cursor: pointer;
        }
      }
      .conten{
        p{
          margin-top: 40px;
          font-size: 16px;
          color: #333;
          text-align: center;
        }
        .btn{
          width: 100px;
          height: 34px;
          line-height: 34px;
          border-radius: 4px;
          border: 1px solid #e3e3e3;
          background: #fafafa;
          text-align: center;
          margin: 40px auto 0;
          cursor: pointer;
          font-size: 14px;
        }
      }
    }
  }
  .insufficientMarginDeposits1{
    display: none;
    // width: 100%;
    // height: 100%;
    background: rgba(0,0,0,0.6);
    position: fixed;
    z-index: 1000;
    overflow: hidden;
    margin-top: -71px;
    // margin-left: -108px;
    .box{
      width: 460px;
      height: 200px;
      position: absolute;
      z-index: 1001;
      background: #fff;
      border-radius: 5px;
      top: 50%;
      left: 50%;
      margin-top: -100px;
      margin-left: -230px;
      overflow: hidden;
      .Title{
        height: 40px;
        line-height: 40px;
        padding: 0 20px;
        border: 1px solid #e3e3e3;
        p{
          float: left;
          font-size: 16px;
          color: #ff6f3c;
        }
        i{
          float: right;
          display: block;
          height: 100%;
          width: 12px;
          cursor: pointer;
        }
      }
      .conten{
        p{
          margin-top: 40px;
          font-size: 16px;
          color: #333;
          text-align: center;
        }
        .btns{
          width: 62%;
          margin: 0 auto 0;
          text-align: center;
          line-height: 34px;
          overflow: hidden;
          .cancel{
            float: left;
            width: 100px;
            height: 34px;
            border-radius: 4px;
            border: 1px solid #e3e3e3;
            background: #fafafa;
            text-align: center;
            margin: 40px auto 0;
            cursor: pointer;
            font-size: 14px;
            color: #333;
          }
          .confirm{
            float: right;
            width: 100px;
            height: 34px;
            border-radius: 4px;
            background: #ff6f3c;
            text-align: center;
            margin: 40px auto 0;
            cursor: pointer;
            font-size: 14px;
            color: #fff;
          }
        }
      }
    }
  }
  .heade{
    .search{
      height: 75px;
      line-height: 75px;
      &>p{
        float: left;
        font-size: 14px;
        color: #666;
        margin-left: -150px;
        width: 600px;
        height: 75px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        &>a{
          color: #666;
          &:hover{
            color: #ff6f3c;
          };
        };
      }
      &>div{
        float: right;
        height: 38px;
        width: 340px;
        border: 1px solid #e3e3e3;
        margin-top: 20px;
        line-height: 0;
        i{
          display: block;
          float: right;
          width: 38px;
          height: 20px;
          background: url('../../../static/img/buyCar/buy_search.png') no-repeat 45% 1px;
          cursor: pointer;
          border-left: 2px solid #e3e3e3;
          margin-top: 8px;
        }
        input{
          width: 290px;
          height: 100%;
          padding-left: 10px;
          font-size: 14px;
          color: #333;
          &::-webkit-input-placeholder,&:-moz-placeholder,&::-moz-placeholder,&:-ms-input-placeholder {
            color: #999;
          }
        }
      }
    }
    .heade_con{
      overflow: hidden;
      margin-bottom: 30px;
      .carMainPic{
        float: left;
        width: 600px;
        height: 400px;
        position: relative;
        background-size: 100% auto !important;
        img{
          width: 100%;
          height: 100%;
        }
        p{
          position: absolute;
          bottom: 0;
          width: 100%;
          height: 50px;
          line-height: 50px;
          color: #fff;
          font-size: 18px;
          text-align: center;
          background: rgba(0,0,0,0.6)
        }
      }
      .heade_con_r{
        float: right;
        width: 565px;
        h2{
          font-size: 24px;
          line-height: 30px;
          color: #333;
          height: 62px;
          overflow: hidden;
        }
        .times{
          overflow: hidden;
          padding-top: 27px;
          .state{
            background: #fdc125;
            color: #fff;
            width: 80px;
            height: 80px;
            box-sizing: border-box;
            padding: 16px;
            font-size: 18px;
            line-height: 24px;
            text-align: center;
            float: left;
          }
          .state1{
            background: #fdc125;
            color: #fff;
            width: 80px;
            height: 80px;
            line-height: 80px;
            box-sizing: border-box;
            // padding: 16px;
            font-size: 18px;
            text-align: center;
            float: left;
          }
          .state2{
            background: #ff6f3c;
            color: #fff;
            width: 80px;
            height: 80px;
            line-height: 80px;
            box-sizing: border-box;
            // padding: 16px;
            font-size: 18px;
            text-align: center;
            float: left;
          }
          .state3{
            background: #ff6f3c;
            color: #fff;
            width: 80px;
            height: 80px;
            box-sizing: border-box;
            padding: 16px;
            font-size: 18px;
            line-height: 24px;
            text-align: center;
            float: left;
          }
          .times_times{
            float: left;
            height: 80px;
            background: #fafafa;
            width: 484px;
            padding: 20px 0 20px 20px;
            box-sizing: border-box;
            overflow: hidden;
            text-align: left;
            .tim{
              float: left;
            }
          }
          .countDown{
            float: right;
            padding-right: 20px;
            .ti{
              color: #ff6f3c;
              font-size: 18px;
              span{
                color: #333;
                font-size: 14px;
              }
            }
          }
        }
        .Bond{
          width: 562px;
          height: 108px;
          border: 1px solid #ff6f3c;
          background: #fff8f6;
          margin: 40px 0 30px;
          .AmountMoney{
            float: left;
            text-align: center;
            width: 50%;
            height: 60px;
            margin: 24px 0;
            p{
              font-size: 16px;
              color: #333;
            }
            h3{
              font-size: 24px;
              color: #ff6f3c;
              margin-top: 16px;
            }
          }
        }
        .Buttons{
          width: 100%;
          overflow: hidden;
          .confirm{
            float: left;
            cursor: pointer;
            font-size: 18px;
            width: 190px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            color: #fff;
            background: #ff6f3c;
            border-radius: 5px;
          }
          .telephone{
            float: right;
            cursor: pointer;
            width: 190px;
            height: 50px;
            background: #fdc125;
            border-radius: 5px;
            color: #fff;
            font-size: 18px;
            line-height: 50px;
            text-align: center;
            img{
              margin-top: 14px;
              vertical-align: -5px;
              margin-right: 10px;
              width: 20px;
              height: 24px;
            }
          }
        }
        .Prompt{
          margin-top: 30px;
          .tit{
            color: #ff6f3c;
            margin-bottom: 10px;
          }
          p{
            letter-spacing: 0.6px;
            font-size: 14px;
            color: #666;
            line-height: 24px;
          }
        }
      }
    }
  }
}
</style>
